Google Gemini

3D 이미지 캐러셀 구현 코드

이렇게 웹사이트 만들어서 구현한 코드 보내줘

영상에서 보이는 것처럼 이미지가 좌우로 부드럽게 흐르면서 마우스 휠이나 드래그에 따라 회전하는 듯한 3D 캐러셀(Carousel) 효과는 Three.js 같은 3D 라이브러리를 사용하거나, CSS 3D Transform과 JavaScript를 조합하여 구현할 수 있습니다.

웹 초보자도 접근하기 쉬운 CSS와 Vanilla JS를 활용한 핵심 구현 코드를 작성해 드립니다.

1. HTML (구조)

이미지들을 감싸는 컨테이너와 각 이미지 요소들을 배치합니다.

HTML
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>3D Image Carousel</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="scene">
        <div class="carousel">
            <div class="carousel__cell"><img src="image1.jpg" alt=""></div>
            <div class="carousel__cell"><img src="image2.jpg" alt=""></div>
            <div class="carousel__cell"><img src="image3.jpg" alt=""></div>
            <div class="carousel__cell"><img src="image4.jpg" alt=""></div>
            <div class="carousel__cell"><img src="image5.jpg" alt=""></div>
            <div class="carousel__cell"><img src="image6.jpg" alt=""></div>
            <div class="carousel__cell"><img src="image7.jpg" alt=""></div>
            <div class="carousel__cell"><img src="image8.jpg" alt=""></div>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

2. CSS (3D 효과 및 레이아웃)

perspective 속성으로 원근감을 주고, 각 이미지를 원형으로 배치합니다.

CSS
body {
    margin: 0;
    overflow: hidden;
    background-color: #fff;
}

.scene {
    width: 100vw;
    height: 100vh;
    perspective: 1000px; /* 원근감 깊이 조절 */
    display: flex;
    justify-content: center;
    align-items: center;
}

.carousel {
    width: 300px;
    height: 400px;
    position: absolute;
    transform-style: preserve-3d;
    transition: transform 0.5s ease-out; /* 움직임 부드럽게 */
}

.carousel__cell {
    position: absolute;
    width: 280px;
    height: 380px;
    left: 10px;
    top: 10px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.carousel__cell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

3. JavaScript (회전 로직)

이미지 개수에 맞춰 각도를 계산하고, 마우스 휠 이벤트에 따라 carousel을 회전시킵니다.

JavaScript
const carousel = document.querySelector('.carousel');
const cells = carousel.querySelectorAll('.carousel__cell');
const cellCount = cells.length;
const theta = 360 / cellCount; // 각 이미지 사이의 각도
const radius = Math.round((150) / Math.tan(Math.PI / cellCount)); // 반지름 계산

let selectedIndex = 0;

// 초기 배치
function rotateCarousel() {
    cells.forEach((cell, i) => {
        const cellAngle = theta * i;
        cell.style.transform = `rotateY(${cellAngle}deg) translateZ(${radius * 2}px)`; 
        // radius에 곱하는 숫자를 조절해 원의 크기를 키울 수 있습니다.
    });
}

// 휠 이벤트로 회전 제어
window.addEventListener('wheel', (event) => {
    if (event.deltaY > 0) {
        selectedIndex++;
    } else {
        selectedIndex--;
    }
    const angle = theta * selectedIndex * -1;
    carousel.style.transform = `translateZ(-${radius * 2}px) rotateY(${angle}deg)`;
});

rotateCarousel();

구현 팁:

이미지 간격: radius 값을 크게 조절할수록 영상처럼 이미지가 넓게 퍼져서 배치됩니다.
부드러운 스크롤: 위 코드는 기본적인 휠 동작을 담고 있습니다. 영상처럼 더 쫀득한 느낌을 원하신다면 GSAP 같은 애니메이션 라이브러리를 사용하여 inertia 효과를 추가하는 것이 좋습니다.
반응형: 화면 크기에 따라 perspective 값과 radius 값을 조정하면 모바일과 데스크탑 모두에서 최적의 뷰를 제공할 수 있습니다.

작업 중인 인터랙티브한 영상 프로젝트나 전시 웹사이트에 이 코드를 기반으로 스타일을 수정해서 사용해 보세요!

오 좋은데 여기서 이제 이미지 어떻게 넣어?

이미지를 넣는 방법은 아주 간단합니다! 위 코드의 HTML 부분에서 <img> 태그의 src 속성에 여러분이 가지고 계신 이미지 파일의 경로를 적어주시면 됩니다.

진행 중인 3부작 영상 프로젝트의 스틸컷이나, 이전에 관심 있게 보셨던 Bára Prášilová 스타일의 사진들을 넣어보면 훨씬 멋질 것 같아요.

구체적인 방법 3가지를 정리해 드립니다.

1. 내 컴퓨터에 있는 파일 넣기 (가장 일반적)

작업 중인 폴더 안에 images라는 폴더를 만들고 사진들을 넣었다면 아래와 같이 작성합니다.

HTML
<div class="carousel__cell"><img src="images/work01.jpg" alt="작품1"></div>
<div class="carousel__cell"><img src="images/work02.png" alt="작품2"></div>

2. 온라인 이미지 주소 넣기 (테스트용)

아직 이미지가 준비되지 않았다면, 인터넷에 있는 이미지 주소(URL)를 복사해서 바로 넣을 수도 있습니다.

HTML
<div class="carousel__cell">
    <img src="https://picsum.photos/300/400?random=1" alt="랜덤 이미지">
</div>

3. 스타일 수정 (중요!)

영상에서 본 것처럼 이미지가 찌그러지지 않고 꽉 차게 보이게 하려면 CSS에 다음 설정을 꼭 확인하세요.

CSS
.carousel__cell img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 이미지가 비율에 맞게 꽉 차도록 설정 */
    display: block;
}

💡 팁: 영상 같은 느낌 더하기

전시 웹사이트나 영상 작업물의 분위기를 살리고 싶다면, 이미지 대신 <video> 태그를 섞어서 넣을 수도 있습니다.

HTML
<div class="carousel__cell">
    <video src="video/my_artwork.mp4" autoplay loop muted playsinline></video>
</div>

혹시 이미지를 넣었는데 화면에 제대로 안 나오거나, 마우스 휠 속도를 더 빠르게 조절하고 싶으신가요? 말씀해 주시면 바로 코드를 수정해 드릴게요!

Gemini is AI and can make mistakes, including about people. Your privacy & Gemini Opens in a new window

Chats

Conversation with Gemini

Gemini said